JavaScript in JSX with Curly Braces

JSX 在 JavaScript 檔案內撰寫類似 HTML 的標記，將渲染邏輯和內容放在同一個地方 => 元件內。

<mark> 將渲染邏輯和內容放在同一個地方 
=> 好處:確保在每次編輯時保持同步。 
=> 好處:元件間彼此分開，更改時不會彼此被影響。
</mark>

想在標記中，加入一點 JavaScript 邏輯或是屬性以動態變更，可以在 JSX 中使用 {花括號}來 使用 JavaScript

You will learn

• How to pass strings with quotes引號
• How to reference a JavaScript variable inside JSX with curly braces
• How to call a JavaScript function inside JSX with curly braces

• How to use a JavaScript object inside JSX with curly braces

• 如何在引號中傳遞字串

• 如何使用花括號在 JSX 中參考 JavaScript 變數
• 如何使用花括號在 JSX 中呼叫 JavaScript 函數
• 如何在 JSX 中使用 JavaScript 物件

Q1: 如何在 JSX 中撰寫JavaScript表達式。

JSX 其實就是 JavaScript 的語法擴充。
JSX 中可以傳入字串、數字、其他JavaScript表達式、物件。
可以把資料寫死，也可以透過{ }動態呈現資料，使用 {} 在裡面放入變數 (variables) / 表達式 (expressions)，撰寫 JavaScript 的邏輯。
在 JSX 中只能以2種方式使用 { }

1. markup tag 的內容
2. markup tag 的屬性等號右邊

Passing strings with quotes

<mark>You will learn
* How to pass strings with quotes</mark>

傳遞字串到 JSX 屬性時，可以用單引號或雙引號將字串括起來：

expression 表達式可以放入 JS 物件中，

Q2: 如何在 JSX 中使用 {}？

在 JSX 中只能以2種方式使用 { }

1. markup tag 的內容
2. markup tag 的屬性等號右邊

Q3: 如何在 JSX 中傳入物件 / 使用 inline CSS styles。

在 JSX 中傳入物件 {name: "Ellen", age: "18"}

例如 把物件存放在一個變數person，在JSX中使用person物件，{}內放入表達式 物件的key，就可以取得物件的值value。

<>
  <h1>{person.name}</h1>
  <p>age: {person.age}</p>
</>

使用 inline CSS styles {{雙大括號}}

物件以大括號表示，例如 { background-color: 'black', color: 'pink' }。

因此，要在JSX中傳遞JS物件，必須將該物件外再包一對{ }大括號：

<ul style={{
  backgroundColor: 'black',
  color: 'pink'
}}>

可能會在JSX中看到這種使用 inline CSS styles的情況。
!! React並不要求使用inline style（對於大多數情況，CSS classes BETTER!）。

需要使用inline style時，可以將一個物件傳給style屬性，記得 key in camelCase：

Q4: inline CSS styles 的屬性有什麼特別的撰寫規則嗎？請舉例。

傳入物件到style 屬性，物件外再包一對curly braces { }
物件的key要camelCase

<ul style={{
  backgroundColor: 'black',
  color: 'pink'
}}>